<template>
  <div class="container">
    <div class="login-box">
      <div class="logo">
        <a-avatar style="margin-bottom: 15px;width: 80px;height: 80px" src="https://joeschmoe.io/api/v1/random"/>
        <h3>欢迎来到 Loveteemo 管理后台</h3>
      </div>
      <a-form
          :model="formData"
          name="basic"
          @finish="onFinish"
          @filishFailed="onFinishFailed"
          autocomplete="off">
        <a-form-item name="username"  class="login-input">
          <a-input v-model:value="formData.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item name="password" class="login-input">
          <a-input-password v-model:value="formData.password" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" class="login-btn">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
import {defineComponent, reactive} from "vue";
import {useRouter} from "vue-router/dist/vue-router";
import {message} from "ant-design-vue"

export default defineComponent({
  setup() {
    const router = useRouter();
    const formData = reactive({
      username: 'admin',
      password: 'admin',
    });
    const onFinish = values => {
      console.log(formData)
      if (values.username === "admin" && values.password === "admin"){
        console.log("login success")
        router.push({path:"/index"})
        return
      }
      message.error('账号或者密码错误,可以试试 admin/admin');
    };
    const onFinishFailed = errorInfo => {
      console.log('failed:', errorInfo)
    }
    return {
      formData,
      onFinish,
      onFinishFailed
    }
  }
})

</script>
<style scoped>
.container {
  height: 100%;
}


.login-box {
  width: 450px;
  height: 300px;
  margin: 280px auto 0 auto;
  text-align: center;
}
.logo {
  height: 150px;
  margin: 0 auto;
  text-align: center;
}
.login-input {
  width: 60%;
  margin: 0 auto 20px auto;
}
.login-btn {
  width: 60%;
  margin: 0 auto 20px auto;
}


</style>